<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function LoadPhotoList()
{
	var albumId=GetUrlPara('albumId');
	if(albumId!=null)
	{	
	  var oReq = new ActiveXObject("MSXML2.XMLHTTP.3.0");
      oReq.open("POST", "photo_view.php?action=GetPhotoList", false);
      oReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	  var para="albumId="+albumId;
      oReq.send(para); 
	
	 // alert(oReq.responseText);
	  eval("photoList="+oReq.responseText);	  
	 // alert(photoList);
	 
	 var photoListDiv=document.getElementById("photoListDiv");
	 for(var i=0;i<photoList.length;i++)
	 {
		 
		 var photoDiv= document.createElement("div");
		 photoDiv
		 photoDiv.style.padding="10px";
		 photoDiv.style.styleFloat="left";
		 if(i%4==0)
		 {
			 photoDiv.style.clear="both";
		 }
		 
		 var imgSrc="upload_photo/"+photoList[i].name;		 
		 var photoImg=document.createElement("img");
		 //此照片在当前相册中的顺序编号
		 photoImg.photoNo=i;
		 photoImg.id=photoList[i].id;
		 photoImg.src=imgSrc;
		 photoImg.height=200;
		 photoImg.width=200;
		 photoImg.style.cursor="pointer";		 
		 photoDiv.appendChild(photoImg);
		 photoImg.attachEvent("onclick",GetPhotoInfo);
		 
		 var titleDiv=document.createElement("div");
		 titleDiv.innerText="Title:"+photoList[i].title;
		 titleDiv.style.textAlign="center";
		 photoDiv.appendChild(titleDiv);
		 
		 photoListDiv.appendChild(photoDiv);
	 }
	}
}


function GetUrlPara(val)
{
	var uri=window.location.search;
	var reg=new RegExp(""+val+"=([^&?]*)","ig");
	return ((uri.match(reg))?(uri.match(reg)[0].substr(val.length+1)):null);
}

function GetPhotoInfo()
{
	var infoDiv=document.getElementById("infoDiv");
	infoDiv.style.display="block";
	
	var photoId=event.srcElement.id;
	//此照片在相册中的顺序编号，从0开始
	var photoNo=event.srcElement.photoNo;
	
	if(photoId!=null)
	{
	
	 /* var oReq = new ActiveXObject("MSXML2.XMLHTTP.3.0");
      oReq.open("POST", "photo_view.php?action=GetPhotoInfo", false);
      oReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	  var para="photoId="+photoId;
      oReq.send(para); 
	
	 // alert(oReq.responseText);
	  eval("photoInfo="+oReq.responseText);	  */
	  var photoInfo=photoList[photoNo];
	  AddPhotoInfo(photoInfo,photoNo);
	  
	 
	}
}

function AddPhotoInfo(photoInfo,photoNo)
{
	 var photoInfoDiv=document.getElementById('photoInfoDiv');
	  while(photoInfoDiv.lastChild!=null)
	  {
		  photoInfoDiv.removeChild(photoInfoDiv.lastChild);
	  }
	  
	  var photoImg=document.createElement("img");
	  var imgSrc="upload_photo/"+photoInfo.name;
	  photoImg.src=imgSrc;
	  photoInfoDiv.appendChild(photoImg);
	  
	  photoImg.attachEvent("onclick",function(){GetNextPhoto(photoNo)});
	  
	  var titleDiv=document.createElement("div");
	  titleDiv.innerText="Title:"+photoInfo.title;
	  photoInfoDiv.appendChild(titleDiv);
	  
	  var descDiv=document.createElement("div");
	//  descDiv.innerText="Description:"+photoInfo.description;
	  photoInfoDiv.appendChild(descDiv);
}

function HidePhotoInfo()
{
	var infoDiv=document.getElementById("infoDiv");
	infoDiv.style.display="none";
}

function GetNextPhoto(photoNo)
{	
	if(photoNo<photoList.length-1)
	{
	   photoNo++;
	}
	else
	{
		photoNo=0;
	}
	
	var photoInfo=photoList[photoNo];
	AddPhotoInfo(photoInfo,photoNo);
	//alert(photoNo);
}

function test()
{
	alert(photoList);
}
</script>
</head>
<body onload="LoadPhotoList()">
<div>相册 》<a href="album_view.htm">我的相册</a> 》 <span onclick="test()">test</span></div>
<div id="photoListDiv"></div>
<div id="infoDiv" style="position:absolute; background-color:#CCC; width:600px; height:600px; text-align:center;display:none; left:50px; top:50px;">
<div style="text-align:right"><span onclick="HidePhotoInfo()">关闭</span></div>
<div id="photoInfoDiv"></div>
</div>
</body>
</html>